<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.bookmanager.model.User" %>
<%@ page import="com.bookmanager.model.BorrowRecord" %>
<%@ page import="java.util.List" %>
<%
    User user = (User) session.getAttribute("user");
    if (user == null) {
        response.sendRedirect("../login.jsp");
        return;
    }

    List<BorrowRecord> borrowHistory = (List<BorrowRecord>) request.getAttribute("borrowHistory");
%>
<html>
<head>
    <title>借阅历史 - 图书管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f7fa;
            color: #333;
        }

        .header {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 0 20px;
        }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            height: 70px;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #667eea;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .welcome {
            color: #666;
        }

        .logout-btn {
            padding: 8px 16px;
            background: #dc3545;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 0.9rem;
        }

        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .page-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .page-header h1 {
            color: #333;
            margin-bottom: 10px;
        }

        .page-header p {
            color: #666;
            font-size: 1.1rem;
        }

        .section {
            background: white;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .section-title {
            font-size: 1.3rem;
            color: #333;
        }

        .book-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .book-table th,
        .book-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }

        .book-table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #555;
        }

        .book-table tr:hover {
            background: #f8f9fa;
        }

        .status-returned {
            color: #28a745;
            font-weight: bold;
        }

        .status-overdue {
            color: #dc3545;
            font-weight: bold;
        }

        .status-borrowing {
            color: #17a2b8;
            font-weight: bold;
        }

        .btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85rem;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-detail {
            background: #6c757d;
            color: white;
        }

        .btn-back {
            background: #667eea;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
            margin-top: 20px;
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }

        .empty-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .filter-options {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .filter-btn {
            padding: 8px 16px;
            border: 1px solid #667eea;
            background: white;
            color: #667eea;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .filter-btn.active {
            background: #667eea;
            color: white;
        }
    </style>
</head>
<body>
<!-- 顶部导航 -->
<div class="header">
    <div class="nav-bar">
        <div class="logo">📚 图书管理系统</div>
        <div class="user-info">
            <span class="welcome">欢迎，<strong><%= user.getUsername() %></strong></span>
            <a href="<%= request.getContextPath() %>/logout" class="logout-btn">退出登录</a>
        </div>
    </div>
</div>

<div class="container">
    <!-- 页面头部 -->
    <div class="page-header">
        <h1>📊 借阅历史</h1>
        <p>查看您的所有借阅记录</p>
    </div>

    <!-- 借阅历史 -->
    <div class="section">
        <div class="section-header">
            <h3 class="section-title">所有借阅记录</h3>
            <div class="filter-options">
                <a href="borrow-history?filter=all" class="filter-btn <%= "all".equals(request.getParameter("filter")) || request.getParameter("filter") == null ? "active" : "" %>">全部</a>
                <a href="borrow-history?filter=current" class="filter-btn <%= "current".equals(request.getParameter("filter")) ? "active" : "" %>">当前借阅</a>
                <a href="borrow-history?filter=returned" class="filter-btn <%= "returned".equals(request.getParameter("filter")) ? "active" : "" %>">已归还</a>
                <a href="borrow-history?filter=overdue" class="filter-btn <%= "overdue".equals(request.getParameter("filter")) ? "active" : "" %>">已逾期</a>
            </div>
        </div>

        <% if (borrowHistory != null && !borrowHistory.isEmpty()) { %>
        <table class="book-table">
            <thead>
            <tr>
                <th>图书名称</th>
                <th>作者</th>
                <th>借阅日期</th>
                <th>应还日期</th>
                <th>归还日期</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <% for (BorrowRecord record : borrowHistory) { %>
            <tr>
                <td><%= record.getBookTitle() != null ? record.getBookTitle() : "未知图书" %></td>
                <td><%= record.getBookAuthor() != null ? record.getBookAuthor() : "未知作者" %></td>
                <td><%= record.getBorrowDate() != null ? record.getBorrowDate().toLocalDate().toString() : "未知" %></td>
                <td><%= record.getDueDate() != null ? record.getDueDate().toLocalDate().toString() : "未知" %></td>
                <td>
                    <% if (record.getReturnDate() != null) { %>
                    <%= record.getReturnDate().toLocalDate().toString() %>
                    <% } else { %>
                    -
                    <% } %>
                </td>
                <td class="status-<%= record.getStatus() %>">
                    <% if ("returned".equals(record.getStatus())) { %>
                    已归还
                    <% } else if (record.isOverdue()) { %>
                    已逾期
                    <% } else { %>
                    借阅中
                    <% } %>
                </td>
                <td>
                    <button class="btn btn-detail" onclick="showBookDetail(<%= record.getBookId() %>)">详情</button>
                </td>
            </tr>
            <% } %>
            </tbody>
        </table>
        <% } else { %>
        <div class="empty-state">
            <div class="empty-icon">📖</div>
            <h3>暂无借阅记录</h3>
            <p>快去借阅您喜欢的图书吧！</p>
            <a href="../books" class="btn-back">去借书</a>
        </div>
        <% } %>
    </div>

    <a href="<%= request.getContextPath() %>/dashboard" class="btn-back">返回用户中心</a>
</div>

<script>
    function showBookDetail(bookId) {
        window.location.href = '../book-detail?bookId=' + bookId;
    }
</script>
</body>
</html>